//水球图
import React from "react";
import * as echarts from "echarts";
import "echarts-liquidfill";

class LiquidFill extends React.Component {
  componentDidMount() {
    this.chart = echarts.init(this.echartsReactNode);
    this.chart.setOption(this.getOptions());
  }

  componentDidUpdate() {
    this.chart.setOption(this.getOptions());
  }

  getOptions = () => {
    const Pie = () => {
      let dataArr = [];
      for (var i = 0; i < 150; i++) {
        if (i % 2 === 0) {
          dataArr.push({
            name: (i + 1).toString(),
            value: 50,
            itemStyle: {
              normal: {
                color: "#00AFFF",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)",
              },
            },
          });
        } else {
          dataArr.push({
            name: (i + 1).toString(),
            value: 100,
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)",
              },
            },
          });
        }
      }
      return dataArr;
    };

    const option = {
      backgroundColor: "#ffffff",
      title: {
        text: "今日医疗器材库存", // 标题文本
        left: "center", // 标题位置，'center'表示居中
        textStyle: {
          color: "#3c3d3e", // 标题颜色
          fontSize: 16, // 标题字体大小
        },
        padding: [5, 0, 0, 0], // 上右下左的内边距，修改底部内边距，增加底部空间
      },
      series: [
        {
          type: "liquidFill",
          radius: "55%",
          center: ["50%", "55%"],
          data: [0.6, { value: 0.6, direction: "left" }], //球内的波浪
          backgroundStyle: {
            borderWidth: 1,
            color: "rgba(62, 208, 255, 1)",
          },
          amplitude: "6%",
          color: [
            {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: "#429BF7" },
                { offset: 1, color: "#6CDEFC" },
              ],
              globalCoord: false,
            },
          ],
          label: {
            normal: {
              formatter: 0.64 * 100 + "\n{d|%}", //球内数值
              rich: {
                d: {
                  fontSize: 28,
                },
              },
              textStyle: {
                fontSize: 30,
                color: "#fff",
              },
            },
          },
          outline: {
            show: false,
          },
        },
        // ... 其他 series 配置
        //线
        {
          type: "pie",
          zlevel: 0,
          silent: true,
          radius: ["65%", "67%"],
          center: ["50%", "55%"],
          z: 1,
          label: {
            normal: {
              show: false,
            },
          },
          labelLine: {
            normal: {
              show: false,
            },
          },
          data: Pie(),
        },
        //外发光
        {
          type: "pie",
          z: 1,
          zlevel: -1,
          radius: ["50%", "75.5%"],
          center: ["50%", "55%"],
          hoverAnimation: false,
          clockWise: false,
          itemStyle: {
            normal: {
              borderWidth: 20,
              color: "rgba(224,242,255,0.7)",
            },
          },
          label: {
            show: false,
          },
          data: [100],
        },
        //底层外发光
        {
          type: "pie",
          z: 1,
          zlevel: -2,
          radius: ["70%", "85%"],
          center: ["50%", "55%"],
          hoverAnimation: false,
          clockWise: false,
          itemStyle: {
            normal: {
              borderWidth: 30,
              color: "rgba(224,242,255,.3)",
            },
          },
          label: {
            show: false,
          },
          data: [100],
        },
      ],
    };

    return option;
  };

  render() {
    return (
      <div
        ref={(node) => (this.echartsReactNode = node)}
        style={{ width: "90%", height: "260px" }}
      />
    );
  }
}

export default LiquidFill;
